<template>
  <el-popover class="box-item" title="" placement="bottom" width="50px" :disabled="!canSendFlag">
    <div style="text-align: left">
      <el-button style="width: 100%;" type="primary" text @click="handleEditRAName(item)">
        <el-icon>
          <Edit/>
        </el-icon>
        修改名称
      </el-button>
    </div>
    <div>
      <el-button style="width: 100%;" type="danger" text @click="handleDeleteRA(item,index,targetArr)">
        <el-icon>
          <Delete/>
        </el-icon>
        删除记录
      </el-button>
    </div>
    <template #reference>
      <el-button size="small" style="margin-right: 5px">
        <el-icon>
          <More/>
        </el-icon>
      </el-button>
    </template>
  </el-popover>

  <!--  修改名称的弹框 -->
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog title="修改名称" v-model="dialogVisible" width="500px" append-to-body>
    <el-input v-model="newGroupName" placeholder="请输入新的分组名称..." maxlength="35" />
    <div style="font-size: 12px;color: #e38888;text-align: right;margin-top: 5px">* 请填写新的名称，按确认按钮保存</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import {Delete, Edit, More} from '@element-plus/icons-vue'
import {canSendFlag, deleteSendHistoryByCode, updateSendHistoryGroupNameByCode} from "@/api/ai/ai.js";

const {proxy} = getCurrentInstance();
const dialogVisible = ref(false);
const newGroupName = ref('')


const tP = defineProps({
  targetArr: {
    type: Array
  },
  item: {
    type: Object,
    required: true
  },
  index: {
    type: Number
  }
})

function handleEditRAName(item) {
  dialogVisible.value = true
}

function handleDeleteRA(item, index, target) {
  // 删除确认
  proxy.$modal.confirm("该操作会清空当前分组的记录，确认删除吗？").then(() => {
    // 删除逻辑
    deleteSendHistoryByCode(item.requestAnswerGroupCode).then(() => {
      target.splice(index, 1)
      proxy.$modal.msgSuccess("删除成功");
    })
  }).catch(() => {
    // 取消逻辑
  });
}

function cancel() {
  dialogVisible.value = false
  newGroupName.value = ''
}

function submitForm() {
  newGroupName.value = newGroupName.value.trim();
  if (!newGroupName.value) {
    proxy.$modal.msgError("分组名称不能为空");
  }
  updateSendHistoryGroupNameByCode(tP.item.requestAnswerGroupCode, newGroupName.value).then(() => {
    tP.item.requestAnswerGroupName  = newGroupName.value
    dialogVisible.value = false
    newGroupName.value = ''
    proxy.$modal.msgSuccess("修改成功");
  })
}
</script>
